<template>
    <div class="article-container" ref="article_container">
        <div class="main">
            <div class="title">{{ blog.title }}</div>
            <div class="author">时间：{{blog.create_time}}作者：{{ blog.author }}</div>
            <div class="content" v-html="blog.content"></div>
            <div class="back-top">
              <div class="goTop" @click="toTop">
                <i class="el-icon-top"></i>
                返回顶部
              </div>
              <div class="blog-good" @click="blogGood(blog.id)">
                <i class="el-icon-star-on"></i>
                赞{{ blog.good }}
              </div>
            </div>
        </div>
        <!-- 评论框 -->
        <div class="add-comment">
          <div class="comment-title">你觉得文章怎么样</div>
          <div class="comment-area">
            <textarea v-model="comment_content" name="" id="" cols="30" rows="10" placeholder="写下你想说的话，开始我们的对话"></textarea>
          </div>
          <el-button @click="addComment" type="warning">评论</el-button>
        </div>
        <!-- 评论展示 -->
        <div  class="comment-display" v-for="(item,index) in comments" :key="index">
            <div  class="comment-content clearfix">
              <div class="nickname">{{item.nickname}}</div>
              <div class="content">
                {{item.content}}
              </div>
              <div class="time">{{item.create_time}}</div>
              <div class="good" @click="gogood(item.id)">
                <i class="el-icon-thumb"></i>
                 {{item.good}}
              </div>
            </div>
        </div>
    </div>
</template>
<script>
import { displayblogApi ,goBlogGoodApi} from '@/api/blog'
import { addCommentApi , getCommentsApi  ,goGoodApi} from '@/api/comment'
import _ from 'lodash'
export default{
    name:'myArticle',
    data(){
        return {
            blog:'',
            comments:'',
            comment_content:''
        }
    },
    mounted() {
    // 1.响应式内边距
    this.listenWidth();
    // 获取评论
    // 监听浏览器窗口变化
    window.onresize = () => {
      let w = document.body.clientWidth;
      if (w < 600) {
        return (() => {
          this.$refs["article_container"].style.padding = "10px";

        })();
      } else {
        return (() => {
          this.$refs["article_container"].style.padding = ".6rem 5rem .6rem 5em";
        })();
      }
    };
    const data  = {'id':this.$route.params.blog_id }
    this.displayblog(data)
    const comment_data  = {'blog_id':this.$route.params.blog_id }
            this.getComment(comment_data)
  },
  methods: {
    
    // 1.响应式内边距
    listenWidth() {
      let w = document.body.clientWidth;
      if (w < 500) {
        return (() => {
          this.$refs["article_container"].style.padding = "10px";
        })();
      } else {
        return (() => {
          this.$refs["article_container"].style.padding = "0.6rem 7.5rem 0.6rem 7.5rem ";
        })();
      }
    },
    // 获取单篇博客
    async displayblog(data){
      await displayblogApi(data).then(res=>{
        this.blog = res.data.blog
      })
    },
    // 获取博客的评论
    async getComment(data){
      await getCommentsApi(data).then(res=>{
        this.comments = res.data.comments
      })
    },
    // 添加评论
    async addComment(){
      if(this.comment_content == ''){
        this.$message({
          type:'error',
          message:'评论不可以为空'
        })
      }
      const blog_id = this.$route.params.blog_id 
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      const data = {'blog_id':blog_id ,'nickname':userInfo.username,'content' :this.comment_content}
      await addCommentApi(data).then(res=>{
       if(res.data.code == 200){
        let data = {'blog_id':this.$route.params.blog_id }
        this.getComment(data)
        this.comment_content =''
       }
      })
    },
    // 评论点赞
    // async gogood(id){
    //   let data = { 'comment_id':id}
    //   await goGoodApi(data).then(res=>{
    //     if(res.data.code == 200){
    //       const comment_data  = {'blog_id':this.$route.params.blog_id }
    //       this.getComment(comment_data)
    //     }
    //   })
    // },
    gogood: _.throttle(async function(id){
      let data = { 'comment_id':id}
      await goGoodApi(data).then(res=>{
        if(res.data.code == 200){
          const comment_data  = {'blog_id':this.$route.params.blog_id }
          this.getComment(comment_data)
        }
      })
    }, 10000),
    // 博客点赞
    blogGood: _.throttle(async function(id){
      let data = { 'blog_id':id}
      await goBlogGoodApi(data).then(res=>{
        if(res.data.code == 200){
          const data  = {'id':id}
          this.displayblog(data)
        }
      })
    }, 10000),
    // async blogGood(id){
    //   let data = { 'blog_id':id}
    //   await goBlogGoodApi(data).then(res=>{
    //     if(res.data.code == 200){
    //       const data  = {'id':this.$route.params.blog_id }
    //         this.displayblog(data)
    //     }
    //   })
    // },
    // 返回顶部
    toTop() {
      document.documentElement.scrollTop = 0;
    },
    },
    watch:{
        '$route':function(){
            const data  = {'id':this.$route.params.blog_id }
            this.displayblog(data)
            const comment_data  = {'blog_id':this.$route.params.blog_id }
            this.getComment(comment_data)
        }
    },
}
</script>
<style lang="less" scoped>

::v-deep .w-e-text-container [data-slate-editor] span {
    font-size: 22px !important;
}
.article-container{
    padding: 0.6rem 7.5rem 0.6rem 7.5rem;
    background-color: var(--bgColor);
    span{
    color: var(--font_2);
    font-size: 16px;
  }
  .main{
    background-color: var(--cardColor);
    padding: 20px;
    .back-top{
      position: fixed;
      bottom: 200px;
      right: 40px;
      color: var(--font_2);
      .goTop{
        cursor: pointer;
        font-size: 24px;
      }
      .blog-good{
        cursor: pointer;
      }
    }
  }
  .title{
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: bolder;
  }
  .author{
    font-size: 22px;
    text-align: right;
    margin-bottom: 20px;
  }
  .content{
    font-size: 18px;
    text-align: none;
    color: var(--font_2);
  }
  // 评论
  .add-comment{
    margin-top: 2rem;
    background-color: var(--cardColor);
    padding: 20px;
    .comment-title{
      font-weight: bolder;
      font-size: 24px;
      color: var(--font_2);
      margin-bottom: 20px;
      border-bottom: 1px solid var(--cardLine);
      padding-bottom: 20px;
    }
    .comment-area{
      width: 100%;
      textarea{
        height: 180px;
        width: 100%;
        background-color: var(--cardColor) !important;
        padding: 20px;
        color: var(--font_2);
        font-size: 20px;
      }
    }
  }
  // 评论展示
  .comment-display{
    margin-top: 20px;
      width: 100%;
      background-color: var(--cardColor);
      padding: 20px;

      .comment-content{
        
        width: 100%;
        height: auto;
        background-color: aliceblue;
        border-radius: 10px;
        padding: 10px;
        .nickname{
          font-size: 24px;
          margin-bottom: 10px;
        }
        .content{
          text-indent: 2rem;
        }
        .time{
          font-size: 18px;
          margin-top: 10px;
          text-align: right;
        }
        .good{
          float: right;
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
}
</style>